<template>
  <div class="flow-setting">
    <p class="title"><SvgIcon name="setting" :size="14"/>连线操作</p>
    <el-tabs class="tabs no-bottom-margin" stretch >
      <el-tab-pane name="0">
        <template #label>
          <el-tooltip slot="label" effect="dark" content="配置" placement="top">
            <div><SvgIcon name="setting" /></div>
          </el-tooltip>
        </template>
        <div class="panel-margin-top">
          <el-form label-width="100px" label-position="left" size="small">
            <el-form-item label="连线类型">
              <el-select v-model="propertiesPanel.type" placeholder="选择连线类型" @change="changeLinkType">
                <el-option
                    v-for="item in linkOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="开启动画">
              <el-switch v-model="propertiesPanel.isAnimation" @change="changeProperty('isAnimation',$event)"/>
            </el-form-item>
            <el-form-item label="线宽">
              <el-input-number v-model="propertiesPanel.strokeWidth" :min="1" :max="20" @change="changeProperty('strokeWidth',$event)"/>
            </el-form-item>
            <el-form-item label="动画线颜色">
              <el-color-picker v-model="propertiesPanel.animationStroke" @change="changeProperty('animationStroke',$event)"/>
            </el-form-item>
            <el-form-item label="连线分类">
              <el-select v-model="propertiesPanel.lineType" placeholder="选择类型" @change="changeProperty('lineType',$event)">
                <el-option
                    v-for="item in lineTypeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import {inject, onMounted, reactive, ref} from "vue";
import {ModelerContext, usePropertiesPanelData} from "../../useapi";
import SvgIcon from '../../../component/svgIcon/index.vue';


const modeler: ModelerContext = inject<any>('modeler_context')
const {propertiesPanel} = modeler

const data = usePropertiesPanelData()


const linkOptions = [{
  value: "line-link",
  label: "直线"
},{
  value: "polyline-link",
  label: "直角折线"
},{
  value: "curved-link",
  label: "圆角折线"
},{
  value: "bezier-link",
  label: "贝塞尔曲线"
},]

const lineTypeOptions = [{
  value: "True",
  label: "True"
},{
  value: "False",
  label: "False"
},{
  value: "SUCCESS",
  label: "SUCCESS"
},{
  value: "Failure",
  label: "Failure"
},{
  value: "Other",
  label: "Other"
},{
  value: "PostAttributes",
  label: "Post attributes"
},{
  value: "PostTelemetry",
  label: "Post telemetry"
},{
  value: "AlarmCleared",
  label: "Alarm Cleared"
}]

const changeProperty = (key:string,val:any) => {
  modeler.lf?.getEdgeModelById(propertiesPanel.id).setProperty(key,val)
}

const changeLinkType = (val:any) => {
  modeler.lf?.changeEdgeType(propertiesPanel.id, val);
}


onMounted(() => {
  console.log(modeler)
})

</script>

<style scoped lang="scss">

</style>